<template>
	<view class="app">
		<u-navbar :custom-back="fanhui" :background="background"></u-navbar>
		<view class="column center">
			<view>
				<image class="imag-logo" src="/static/images/logo @2x.png"></image>
			</view>
			<view class="logo-v1">
				<text class="logo-text1">孕道小程序</text>
			</view>
			<view class="logo-v2">
				<text class="logo-text2">怀孕备孕就上孕道</text>
			</view>
		</view>
		<view class="center">
			<button class="input-content" :loading="loading" v-if="showp" type="primary"
				@click="toProviderLogin">登录</button>

			<button class="input-content-qx" :loading="loading" v-if="showp" type="primary"
				@click="tptabUrl()">取消登录</button>


			<button class="input-content" :loading="loading" type="primary" open-type="getPhoneNumber"
				@getphonenumber="getphone" v-else>获取电话</button>
		</view>

	</view>
</template>

<script>
	import api from '@/api/auth.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#A564C3',
				},
				userInfo: {},
				iv: '',
				session_key: '',
				encryptedData: '',
				superior: 0,
				code: '',
				openid: '',
				showp: true,
				loading: false, // 提交中

			}
		},
		onShow() {
			//获取code

		},
		onLoad(option) {
			var superior = uni.getStorageSync('superior');
			if (superior) {
				this.superior = superior
			}


		},
		methods: {
			fanhui() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			tptabUrl() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 第3方授权登录
			toProviderLogin() {
				//获取code码
				this.getcode()
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (infoRes) => {
						this.userInfo = infoRes.userInfo
						this.iv = infoRes.iv
						this.encryptedData = infoRes.encryptedData
						this.getServiceUserInfo({
							code: this.code
						})
					},
					fail: function(res) {
						uni.hideLoading();
					}
				})

				// uni.showLoading({
				// 	mask: true
				// })



			},

			//获取code码
			getcode() {
				let that = this
				uni.login({
					success: function(loginRes) {
						console.log(loginRes.code)
						that.code = loginRes.code
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},


			// 获取应用内的认证授权信息
			async getServiceUserInfo(reqData) {
				let _this = this;
				// 获取openid
				const {
					code,
					message,
					data
				} = await api.loginByProvider(reqData)
				uni.hideLoading()

				if (code != 1) {
					this.$util.msg(message)
					return
				}
				let aa = data.openid
				let bb = data.session_key
				if (aa && bb) {
					_this.openid = aa
					_this.session_key = bb
					const {
						code,
						message,
						data
					} = await api.insetData({
						openid: _this.openid,
						session_key: _this.session_key,
						iv: _this.iv,
						encryptedData: _this.encryptedData,
						superior: _this.superior
					})


					if (code != 1) {
						this.$util.msg('登录失败，请重新登录instrt')
						return
					} else {
						_this.showp = false
					}

				} else {
					// 未绑定手机号，进入绑定手机号页面
					this.$util.msg('登录失败')
					this.navTo('/pages/auth/login')
				}
			},

			async getphone(e) {
				//获取code码
				let _this = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					console.log(e)
					_this.iv = e.detail.iv
					_this.encryptedData = e.detail.encryptedData
					const {
						code,
						message,
						data
					} = await api.insetDatatwo({
						openid: _this.openid,
						session_key: _this.session_key,
						iv: _this.iv,
						encryptedData: _this.encryptedData,

					})
					console.log(data)
				}

				// 登录成功 
				this.loginSuccessCallBack({
					openid: _this.openid,
					userInfo: _this.userInfo
				})
			},
			// 登录成功操作 vuex 
			loginSuccessCallBack(data) {
				this.$util.msg('登录成功')
				// 状态管理保存用户信息
				this.$store.commit('setToken', data)
				setTimeout(() => {
					this.navBack()
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	.app {
		padding-top: 416rpx;
	}

	.imag-logo {
		height: 200rpx;
		width: 200rpx;

		margin-bottom: 20rpx
	}

	.logo-v1 {
		margin-bottom: 20rpx
	}

	.logo-text1 {
		width: 179rpx;
		height: 36rpx;
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #643A92;

	}

	.logo-v2 {
		margin-bottom: 20rpx
	}

	.logo-text2 {
		width: 193rpx;
		height: 25rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.input-content {
		width: 610rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #BB73D5, #643A92);
		box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
		border-radius: 50rpx;
		text-align: center;
		font-size: 35rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 250rpx;

	}

	.input-content-qx {
		width: 610rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #BB73D5, #643A92);
		box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
		border-radius: 50rpx;
		text-align: center;
		font-size: 35rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 120rpx;

	}
</style>
